<template>
  <div class="demo-split" style="overflow:hidden;">
      <Split v-model="split1">
          <div slot="left" class="demo-split-pane">
              <!-- 左侧附件影像 -->
            <marvels-viewer :data="viewerData" :attachMents="attachMents" @initViewer="initViewer" :fileParam="fileParam" :isScroll="isScroll"></marvels-viewer>
          </div>
          <div slot="right" class="demo-split-pane">
              <Card style="">
                <Row>
                  <Col>
                    <!-- 右上客户信息表格 -->
                    <Table :columns="columns1" :data="headData"></Table>
                    <div style="float:right;margin-top:5px;" v-if="taskParams.isModal==false">
                        <Button type="primary" v-if="hangUpStatus=='0' " @click="hangUp">挂起</Button>
                        <Button v-if="hangUpStatus=='9' " type="primary" @click="hangOut">解挂</Button>
                        <Button type="primary" @click="back">返回</Button>
                    </div>
                  </Col>
                </Row>
                <br>
                <Row>
                  <Col>
                    <!-- 右下选项卡内容 -->
                    <Tabs v-model="curTab" @on-click="clickTab">
                        <TabPane label="客户信息" name="customerInfo" class="tabs-tabPane">
                            <customer-info-form :taskParams='taskParams'></customer-info-form>
                        </TabPane>
                        <TabPane label="贷款信息" name="loanInfo" class="tabs-tabPane">
                            <loan-info-form :taskParams='taskParams'></loan-info-form>
                        </TabPane>
                        <TabPane label="征信数据" name="loanCreditReporting" class="tabs-tabPane">
                            <loan-credit-reporting :taskParams='taskParams'></loan-credit-reporting>
                        </TabPane>
                        <TabPane label="风险参数" name="riskParams" class="tabs-tabPane">
                            <risk-params-form :taskParams='taskParams'></risk-params-form>
                        </TabPane>
                        <TabPane label="交叉检验" name="crossCheck" class="tabs-tabPane">
                            <cross-check-form :taskParams='taskParams' @on-item-check="onItemCheck"></cross-check-form>
                        </TabPane>
                        <TabPane label="风险提醒" name="riskTipsForm" class="tabs-tabPane">
                            <risk-tips-form :taskParams='taskParams' @on-item-check="onItemCheck"></risk-tips-form>
                        </TabPane>
                        <TabPane label="审批结果" name="approvalResult" class="tabs-tabPane">
                            <loan-checking-form :taskParams="taskParams" v-if="isShowNode=='woChecking'"></loan-checking-form>
                            <loan-approval-form :taskParams="taskParams" v-if="isShowNode=='woApproval'"></loan-approval-form>
                            <loan-sampling-form :taskParams="taskParams" v-if="isShowNode=='woSampling'"></loan-sampling-form>
                        </TabPane>
                        <TabPane label="流转记录" name="circulationLog" class="tabs-tabPane">
                            <circulation-log-form :taskParams='taskParams'></circulation-log-form>
                        </TabPane>
                        <TabPane label="信审数据" name="bsCreditDataForm" class="tabs-tabPane" v-if="fundCode == '13'">
                            <bs-credit-data-form :taskParams='taskParams'></bs-credit-data-form>
                        </TabPane>
                    </Tabs>
                  </Col>
                </Row>
              </Card>
          </div>
      </Split>
      <Modal v-model="modal1" title="挂起窗口" @on-ok="ok" @on-cancel="cancel" :scrollable="true">
          <div style="text-align: center;">
              <span>挂起原因：</span>
              <Select v-model="hangUpReason" style="width:150px" @on-change="hangUpReasonChange" :label-in-value=true>
                  <Option v-for="item in hangUpReasonList" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
          </div>
      </Modal>
  </div>
</template>

<script>
import customerInfoForm from './customerInfoForm.vue'
import loanInfoForm from './loanInfoForm.vue'
import loanCreditReporting from './loanCreditReporting.vue'
import crossCheckForm from './crossCheckForm.vue'
import marvelsViewer from '../../components/marvels-viewer.vue'
import attachmentTypeData from '../../components/attachment-type-data.js'
import loanApprovalForm from './loanApprovalForm.vue'
import loanSamplingForm from './loanSamplingForm.vue'
import loanCheckingForm from './loanCheckingFormX.vue'
import circulationLogForm from './circulationLogForm.vue'
import riskParamsForm from './riskParamsForm.vue'// 风险参数
import riskTipsForm from './riskTipsForm.vue'
import bsCreditDataForm from './bsCreditDataForm.vue'

export default {
  name: 'task-detail-component',
  components: {
    customerInfoForm,
    loanInfoForm,
    loanCreditReporting,
    crossCheckForm,
    marvelsViewer,
    loanApprovalForm,
    loanSamplingForm,
    loanCheckingForm,
    circulationLogForm,
    riskParamsForm,
    riskTipsForm,
    bsCreditDataForm
  },
  data () {
    return {
      // isShowNode: 'woChecking',
      // isShowNode: 'woApproval',
      // isShowNode: 'woSampling',//审计
      split1: 0.5,
      isShowNode: '',
      hungReason: '', // 挂起原因
      hungReasonCode: '',
      hangUpStatus: '',
      isScroll: false,
      fundCode: null,
      viewerData: [
        // {
        //   label: '身份证',
        //   children: [
        //     {
        //       label: '身份证正面',
        //       src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1526911041826&di=0da991a37474574a96bfee54d69b5ff6&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fexp%2Fw%3D480%2Fsign%3D60e30eebd2c8a786be2a4b065708c9c7%2F962bd40735fae6cd3e7505700cb30f2443a70fd9.jpg'
        //     },
        //     {
        //       label: '身份证反面',
        //       src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1526911041821&di=4ed276b0a6d6192d9167c29606350416&imgtype=0&src=http%3A%2F%2Fp19.qhimg.com%2Ft01e41f04fe62724da1.jpg'
        //     }
        //   ]
        // },
        // {
        //   label: '房产相关图片',
        //   children: [
        //     {
        //       label: '001',
        //       src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1526911111616&di=cbff46a453cf48e588c2ed1a4db9c1ec&imgtype=0&src=http%3A%2F%2Fwww.hhinfo.ac.cn%2Fwcm.files%2Fupload%2FCMShhkjj%2F201609%2F201609301025046.jpg'
        //     },
        //     {
        //       label: '002',
        //       src: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2116275205,2726731435&fm=27&gp=0.jpg'
        //     },
        //     {
        //       label: '003',
        //       src: 'https://bpic.588ku.com/PPt_origin_pic/pptyj/00/00/43/pptyj/8e3692c857b5a51a51cfff7e6e8e210c.jpg-0.jpg!rh1300/fw/892/quality/90/unsharp/true/compress/true'
        //     }
        //   ]
        // },
        // {
        //   label: '合同',
        //   children: [
        //     {
        //       label: '001',
        //       type: 'pdf',
        //       src: 'http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf'
        //     }
        //   ]
        // }
      ],
      fileParam: {
        url: this.$appContext.marvels_core_approve + '/approve/credit/report/service/uploadFile?loanId=' + this.$route.query.loanId + '&atmtTypeName=' + marvelsViewer.atmtTypeName + '&AtmtType=' + marvelsViewer.AtmtType,
        isShow: true
      },
      attachMents: [],
      res1: ['150000', null, null],
      baseUrl: this.$appContext.marvels_core_approve,
      $ajax: null,
      curTab: null,
      curLoanId: '',
      modal1: false,
      taskParams: {// 传递给子tab的参数对象
        curLoanId: '', // this.$route.query.id,
        custCardNo: null, // 身份证
        customerInfo: false, // tab页签name，默认不加载数据
        loanCreditReporting: false,
        loanInfo: false,
        creditData: false,
        riskParams: false,
        crossCheck: false,
        decisionResult: false,
        approvalResult: false,
        circulationLog: false,
        riskTipsForm: false,
        bsCreditDataForm: false,
        type: '',
        nodeCode: null // 当前页面所属流程节点
      },
      hangUpReason: '',
      hangUpReasonList: [
        {
          value: '',
          label: '请选择'
        },
        {
          value: '1001',
          label: '电话无法接通'
        },
        {
          value: '1009',
          label: '系统异常'
        }
      ],
      columns1: [{
        align: 'center',
        title: '客户姓名',
        key: 'custName'
      },
      {
        align: 'center',
        title: '申请金额',
        key: 'principalAmt'
      },
      {
        align: 'center',
        title: '贷款期限',
        key: 'applyTerms'
      },
      {
        align: 'center',
        title: '产品名称',
        key: 'productTypeName'
      },
      // {
      //   align: 'center',
      //   title: '年利率',
      //   key: 'rate'
      // },
      // {
      //   align: 'center',
      //   title: '咨询费率',
      //   key: 'productConsultingRate'
      // },
      // {
      //   align: 'center',
      //   title: '管理费率',
      //   key: 'productManagementRate'
      // },
      {
        align: 'center',
        title: '渠道名称',
        key: 'channelName'
      },
      {
        align: 'center',
        title: '进件城市',
        key: 'loanCityName'
      },
      {
        align: 'center',
        title: '客户经理',
        key: 'employeeName'
      }
      // {
      //   align: 'center',
      //   title: '人工定价',
      //   key: 'pricingType'
      // }
      ],
      headData: []
    }
  },
  methods: {
    // 初始化附件上传下拉列表数据
    initSelectData () {
      var vm = this
      // 查询
      var loanId = this.taskParams.curLoanId
      this.$ajax.post(this.baseUrl + 'approve/process/task_process/service/getUploadAttamentTypes', loanId).then(re => {
        var data = re.data
        var code = data.code
        var message = data.message
        if (code !== 'success') {
          this.$Message.warning(message)
          return
        }
        var attachmentDatas = data.data || []
        attachmentDatas.forEach(item => {
          var tData = {}
          tData.label = item.atmtTypeName
          tData.value = item.atmtType
          vm.attachMents.push(tData)
        })
      }).catch(er => {

      })
    },
    hangUp () {
      var vm = this
      vm.modal1 = true
    },
    back () {
      this.$router.push({ name: 'task_processing', params: {} })// 类似post传参
    },
    initpage: function () {
      var vm = this
      var url = this.baseUrl + 'approve/process/task_process/service/getLoanInfo/' + this.taskParams.curLoanId
      this.$ajax.get(url).then(re => {
        var data = re.data
        var code = data.code
        var message = data.message
        if (code !== 'success') {
          this.$Message.warning(message)
          return
        }
        vm.loanInfoForm = data.data
        vm.fundCode = data.data.fundCode
        vm.hangUpStatus = data.data.caseDTO.status
        // 初始化任务处理详情-表头信息
        vm.initHeadTable()
        // 加载默认tab页签数据
        vm.taskParams.custCardNo = vm.loanInfoForm.custCardNo
        vm.taskParams[this.curTab] = true
      }).catch(er => {

      })
    },
    // 初始化任务处理详情-表头信息
    initHeadTable () {
      var vm = this
      var rowData = {}
      this.columns1.forEach(function (val, index) {
        var columnKey = val.key
        Object.keys(vm.loanInfoForm).forEach(function (key) {
          if (columnKey === key) {
            rowData[columnKey] = vm.loanInfoForm[key]
          }
        })
      })
      this.headData = [rowData]
    },
    // 点击tab事件
    clickTab (tabName) {
      this.taskParams[tabName] = true
    },
    onItemCheck (loanId) {
      this.$emit('on-item-check', loanId)
    },
    ok () {
      var vm = this
      if (vm.hungReasonCode === null || vm.hungReasonCode === '') {
        this.$Message.warning('请选择挂起原因')
        return
      }
      this.$Modal.confirm({
        title: '挂起操作',

        content: '确认挂起吗?挂起前确认所有修改信息已经保存',

        okText: '确定',

        cancelText: '取消',
        onOk: () => {
          var params = {
            loanId: this.taskParams.curLoanId,
            hungReason: vm.hungReason,
            type: '1' // 1 挂起  2解挂
          }
          vm.$ajax.post(vm.$appContext.marvels_core_approve + 'approve/loanapplycase/service/hungUp', params).then(re => {
            var data = re.data
            var code = data.code
            if (code === 'success') {
              vm.hangUpStatus = '9'
            }
            this.$Message.warning(re.data.message)
          }).catch(er => {

          })
        }
      })
    },
    hangOut () {
      var vm = this
      this.$Modal.confirm({
        title: '挂起操作',

        content: '确认解除挂起吗?挂起前确认所有修改信息已经保存',

        okText: '确定',

        cancelText: '取消',
        onOk: () => {
          var params = {
            loanId: this.taskParams.curLoanId,
            hungReason: vm.hungReason,
            type: '2' // 1 挂起  2解挂
          }
          vm.$ajax.post(vm.$appContext.marvels_core_approve + 'approve/loanapplycase/service/hungUp', params).then(re => {
            var data = re.data
            var code = data.code
            if (code === 'success') {
              vm.hangUpStatus = '0'
            }
            this.$Message.warning(re.data.message)
          }).catch(er => {

          })
        }
      })
    },
    cancel () {
      this.modal1 = false
    },
    // 查询流程
    queryCase () {
      var params = {}
      var loanId = this.taskParams.curLoanId// '17050617222455105';//测试loanId
      this.$ajax.post(this.$appContext.marvels_core_approve + 'approve/loanapplycase/service/getLoanApplyCase/' + loanId, params).then(re => {
        if (re.data.code === 'success') {
          this.isShowNode = re.data.data.curNodeCode
          this.taskParams.nodeCode = re.data.data.curNodeCode
          if (this.isShowNode !== 'woChecking' && this.isShowNode !== 'woApproval' && this.isShowNode !== 'woSampling' && this.taskParams.type !== 1) {
            this.isShowNode = 'woSampling'
          }
        } else {
          this.$Message.warning({ title: '提示', content: re.data.data, onOk () { } })
        }
      }).catch(er => {

      })
    },
    // 初始化附件影像
    initViewer () {
      var vm = this
      var params = this.taskParams.curLoanId
      vm.$ajax.post(vm.$appContext.marvels_core_approve + 'approve/credit/report/service/getAttachmentsByViewKey?loanId=' + params).then(re => {
        var data = re.data
        var code = data.code
        var message = data.message
        if (code === 'success') {
          vm.initMediaData(data.data)
        } else {
          vm.$Message.error(message)
        }
        // this.submitWhy = false;
      }).catch(er => {

      })
    },
    initMediaData (data) {
      var list = []
      if (data && data.length > 0) {
        var baseSrc = this.baseUrl + 'approve/credit/intbank/service/loadAttachmentById/'
        for (var i = 0; i < data.length; i++) {
          var viewAttach = {}
          viewAttach.label = data[i].atmtTypeName
          var attachmentList = data[i].laAttachmentDTOList
          var viewList = []
          if (attachmentList && attachmentList.length > 0) {
            for (var j = 0; j < attachmentList.length; j++) {
              let label = attachmentTypeData[attachmentList[j].atmtType] + '_' + (j + 1)
              if ((attachmentList[j].atmtType === 'A' || attachmentList[j].atmtType === 'YH') && attachmentList[j].fileName !== '' && attachmentList[j].fileName !== null) {
                if (attachmentList[j].fileName !== '') {
                  label = attachmentList[j].fileName
                }
              }
              let fileLocation = attachmentList[j].fileLocation
              if (!fileLocation) fileLocation = ''
              let fileName = attachmentList[j].fileName
              if (!fileName) fileName = ''
              viewList.push({
                label: label,
                src: baseSrc + attachmentList[j].id,
                type: fileLocation.substring(fileLocation.lastIndexOf('.') + 1),
                fileType: attachmentList[j].atmtType,
                url: fileLocation
              })
            }
            viewAttach.children = viewList
            list.push(viewAttach)
          }
        }
      }
      this.viewerData = list
    },
    hangUpReasonChange (value) {
      var vm = this
      vm.hungReason = value.label
      vm.hungReasonCode = value.value
    }
  },
  computed: {

  },
  mounted () {
    this.curTab = 'customerInfo'
  },
  created () {
    // var params = this.$route.query || {};
    // if(!params || params.loanId==null || params.loanId==""){
    //     this.$Message.warning("贷款产品申请编号为空");
    //     return;
    // }
    // this.curLoanId = params.loanId;
    this.taskParams.type = this.comptParams.type// 判断查询和修改
    this.taskParams.collapseCotrol = this.$route.query.collapseCotrol
    this.$ajax = this.$util.ajax()
    Object.assign(this.taskParams, this.comptParams)
    if (this.taskParams.isModal === false) { // 第一次打开详情页面，不加载弹出窗请求
      this.initpage()
      this.initSelectData()
      this.queryCase()
      this.initViewer()
    }
  },
  watch: {
    'comptParams.isModal' (v) {
      // 每次打开modal，初始化tabs状态
      if (v) {
        var vm = this
        Object.assign(this.taskParams, this.comptParams)
        this.taskParams.customerInfo = false
        this.taskParams.loanInfo = false
        this.taskParams.creditData = false
        this.taskParams.riskParams = false
        this.taskParams.crossCheck = false
        this.taskParams.decisionResult = false
        this.taskParams.approvalResult = false
        this.taskParams.circulationLog = false
        this.taskParams.riskTipsForm = false
        this.taskParams.bsCreditDataForm = false
        this.taskParams.loanCreditReporting = false
        this.curTab = 'customerInfo'
        setTimeout(function () {
          vm.taskParams.customerInfo = true
        }, 200)
        this.initpage()
        this.initSelectData()
        this.queryCase()
        this.initViewer()
      }
    }
  },
  props: {
    comptParams: Object
  }
}
</script>

<style lang="less">
.task-process-detail-select {
  width: 168px;
}
.ivu-tabs-bar {
  border-bottom: 1px solid #dddee1;
  margin-bottom: 1px;
}
.demo-split{
    height: 780px;
    // border: 1px solid #dcdee2;
}
.demo-split-pane{
    // padding: 10px;
}
.tabs-tabPane{
  height:550px;
  overflow-y:auto;
}
.ivu-input.ivu-input-default.ivu-input-disabled{
  color: black;
}
.ivu-select-disabled .ivu-select-selection {

    color: black;
}
.ivu-select-selected-value{
  color: black;
}
.ivu-input.ivu-input-default{
  color: black;
}
.ivu-form .ivu-form-item-label{
  color: black;
}
.ivu-input.ivu-input-default{
  color: black;
}
.ivu-table-cell{
  color: black;
}
</style>
